import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';

import 'routes.dart';

const TAG = 'material';

class MaterialPage extends StatefulWidget {
  @override
  _MaterialPageState createState() => _MaterialPageState();
}

class _MaterialPageState extends State<MaterialPage>
    with TickerProviderStateMixin {
  AnimationController controller;
  Animation<RelativeRect> animation;
  RelativeRectTween rectTween;
  Animation<int> scaleAnimation;
  CurvedAnimation curve;
  double cardHeight = 0.0, cardWidth = 0.0;
  var isClose = true;

  //card 缩放
  AnimationController controllerCard;
  Animation<int> animationCard;
  CurvedAnimation curveCard;
  List<double> cardHeights = [80.0, 80.0, 80.0, 80.0];
  var isCardClose = true;
  int clickIndex;

  _doItems() {
    List<Widget> list = List();
    for (int i = 0; i < 4; i++) {
      list.add(
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
          child: Card(
            elevation: 8,
            color: Colors.white,
            child: InkWell(
              //单击事件响应
              onTap: () {
                clickIndex = i;
                if (isCardClose) {
                  controllerCard.forward();
                } else {
                  controllerCard.reverse(from: 250);
                }
                isCardClose = !isCardClose;
              },
              child: Container(
                alignment: Alignment(0, 0),
                height: cardHeights[i],
                width: 100,
              ),
            ),
          ),
        ),
      );
    }
    list.add(Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Stack(
          children: <Widget>[
            Container(
              height: 250,
              width: 250,
            ),
            PositionedTransition(
              rect: animation,
              child: Card(
                elevation: 2,
                color: Colors.amberAccent,
              ),
            ),
          ],
        ),
        InkWell(
            onTap: () {
              if (isClose) {
                controller.forward();
              } else {
                controller.reverse(from: 400);
              }
              isClose = !isClose;
            },
            child: Icon(
              Icons.comment,
              size: 50,
            )),
      ],
    ));
    list.add(Row(
      children: <Widget>[
        Hero(
          tag: 'hero',
          child: CircleContainer(
            radius: 80.0,
            color: Colors.blue,
          ),
        ),
        CircleContainer(
          radius: 80.0,
          color: Colors.blue,
        ),
        CircleContainer(
          radius: 80.0,
          color: Colors.blue,
        ),
      ],
    ));
    return list;
  }

  @override
  void initState() {
    controller = AnimationController(
        duration: const Duration(milliseconds: 250), vsync: this);

    rectTween = RelativeRectTween(
      begin: RelativeRect.fromLTRB(0, 280.0, 280.0, 0),
      end: RelativeRect.fromLTRB(
        0.0,
        0.0,
        0.0,
        0.0,
      ),
    );
    animation = rectTween.animate(controller);

    // card 缩放
    controllerCard = AnimationController(
        duration: const Duration(milliseconds: 500), vsync: this);
    curveCard = CurvedAnimation(parent: controllerCard, curve: Curves.easeOut);
    animationCard = IntTween(begin: 0, end: 400).animate(controllerCard)
      ..addListener(() {
        setState(() {
          print(curveCard.value);
          cardHeights[clickIndex] = curveCard.value * 400 + 80;
        });
      });
  }

  @override
  void dispose() {
    controller.dispose();
    controllerCard.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(TAG),
        backgroundColor: Colors.blue,
      ),
      body: ListView(
        children: _doItems(),
      ),
    );
  }
}

class CircleContainer extends StatelessWidget {
  final radius;
  final color;

  const CircleContainer({Key key, this.radius, this.color}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(12.0),
      child: Container(
        height: radius,
        width: radius,
        child: ClipRRect(
          borderRadius: BorderRadius.circular(radius),
          child: Material(
            child: InkWell(
              onTap: () {
                String route = '${Routes.heropage}';
                Routes.router.navigateTo(context, route,
                    replace: false, transition: TransitionType.fadeIn);
              },
              child: Container(),
            ),
            color: color,
          ),
        ),
      ),
    );
  }
}

class HeroPage extends StatefulWidget {
  var TAG = "HeroPage";

  @override
  _HeroPageState createState() => _HeroPageState();
}

class _HeroPageState extends State<HeroPage> with TickerProviderStateMixin {
  AnimationController controller;
  Animation<int> animation;
  CurvedAnimation curve;
  var opacity = 0.0;

  @override
  void initState() {
    controller = AnimationController(
        duration: const Duration(milliseconds: 500), vsync: this);
    curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
    animation = IntTween(begin: 0, end: 100).animate(controller)
      ..addListener(() {
        setState(() {
          opacity = curve.value;
        });
      });

    controller.forward();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(TAG),
      ),
      body: Column(
        children: <Widget>[
          Hero(
            tag: 'hero',
            child: Material(
              color: Colors.blue,
              child: InkWell(
                onTap: () {
                  Navigator.pop(context);
                },
                child: Container(
                  height: 350,
                ),
              ),
            ),
          ),
//          Row(
//            children: <Widget>[
//              Opacity(
//                opacity: opacity,
//                child: SizedBox(
//                  height: 150,
//                  width: 150,
//                  child: Card(
//                    elevation: 2,
//                    color: Colors.blueAccent,
//                  ),
//                ),
//              ),
//            ],
//          )
        ],
      ),
    );
  }
}
